<template>
    <div class="user-bind-card-success">
        
        <div class="header">
            <img src="../images/success.png" width="96" alt="">
            <p class='font-subhead'>银行卡绑定成功</p>
            <p class='font-caption'>银行卡绑定成功，接下来请完成信用认证<br>完成后就可以借款／出借</p>
        </div>

        <div class="success-button">
            <span class="button" @click='goCreditReportIndex'>我要借款／出借，完成信用认证</span>
        </div>
        <div class="success-button">
            <span class="button" @click='goIOUAdd'>我不借款／出借，只补借条</span>
        </div> 
        <p class="success-text">仅用补借条功能，无需信用报告</p>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword
        },
        data() {
            return {
                payPasswordShow:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            test(){
                console.log(1)
            },
            goCreditReportIndex(name){
                this.$router.push({
                    name:'user-credit-report-index'
                })
            },
            goIOUAdd(name){
                this.$router.push({
                    name:'loan-IOU-add'
                })
            },
        },
        created(){
            
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-bind-card-success{
        .header{
            text-align: center;
            padding-bottom: 32px;
            img{
                padding-top: 48px;
            }
            .font-subhead{
                padding-top: 16px;
                color:$importColor;
            }
            .font-caption{
                text-align:center;
                padding-top: 16px;
            }
        }
        .loan-money__info{
            @extend %font-caption;
            color:$importColor;
        }
        .success-button{
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            .button{
                width: 250px;
            }
        }
        .success-text{
            @extend %font-caption;
            text-align: center;
        }
    }
</style>
